<template>
	<view class="content">
		<view class="box">
			<view class="fingerprint item" @click="fingselect">
				<image v-show="!fingSrc" class="icon" src="@/static/upload.png" mode="widthFix"></image>
				<view v-show="!fingSrc" class="txt">
					拍照并上传指纹卡
				</view>
				<image v-if="fingSrc" class="Preview" :src="fingSrc" mode="aspectFit"></image>
			</view>

			<view class="palmprint item" @click="palmselect">
				<image v-show="!palmSrc" class="icon" src="@/static/upload.png" mode="widthFix"></image>
				<view v-show="!palmSrc" class="txt">
					拍照并上传掌纹卡
				</view>
				<image v-if="palmSrc" class="Preview" :src="palmSrc" mode="aspectFit"></image>
			</view>
		</view>
		<view class="tips">
			注意事项：
		</view>

		<view class="btn" @click="Signing">
			确认提交
		</view>

		<confirmview ref="confirmedView" />

	</view>
</template>

<script>
	import confirmview from "../../components/confirm/confirm"
	import {
		upload,
		finger_palm
	} from "@/api/index.js"
	export default {
		components: {
			confirmview
		},
		data() {
			return {
				fingSrc: false,
				fingremote: "",
				palmSrc: false,
				palmremote: "",
				item: ''
			};
		},
		onLoad() {
			this.item = JSON.parse(uni.getStorageSync('generalItem'))
			uni.setNavigationBarTitle({
				title: this.item.name
			});
			uni.getSystemInfo({
				success: res => {
					console.log(res.safeArea.height)
				}
			})
		},
		methods: {
			Signing() {
				// this.$refs.confirmedView.open()
				if (!this.fingSrc) {
					uni.showToast({
						icon: 'none',
						title: '请上传指纹卡'
					});
					return
				}
				if (!this.palmSrc) {
					uni.showToast({
						icon: 'none',
						title: '请上传掌纹卡'
					});
					return
				}

				finger_palm({
					id: this.item.id,
					finger: this.fingremote,
					palm: this.palmremote,
				}).then(res => {
					uni.showToast({
						icon: 'none',
						title: '提交成功'
					});
					uni.navigateBack({
						animationDuration:1500,
						animationType:"slide-out-left",
						
					})
				})
			},
			// 获取上传状态
			fingselect(e) {
				upload().then(res => {
					this.fingSrc = res.preview
					this.fingremote = res.src
				})
			},
			palmselect() {
				upload().then(res => {
					this.palmSrc = res.preview
					this.palmremote = res.src
				})
			},

		}
	}
</script>

<style lang="less">
	@import url("../../index.less");
	.content {
		overflow: hidden;
		margin: auto;
		.box {
			display: flex;
			justify-content: space-around;
			width: 100%;

			.item {
				width: 330rpx;
				height: 220rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				margin: 30rpx;
				overflow: hidden;

				.icon {
					width: 80rpx;
					margin: 42rpx auto 27rpx;
					display: block;
				}

				.txt {
					text-align: center;
					font-size: @font12;

					font-weight: 400;
					color: #666666;

				}

				.Preview {
					width: 330rpx;
					height: 220rpx;
				}
			}
		}

		.tips {
			font-size: @font14;
			color: #707070;
			margin: 30rpx;
		}
	}


	.btn {
		width: 400rpx;
		height: 40px;
		background: #FF7100;
		border-radius: 20px;
		opacity: 1;
		font-size: @font14;
		color: #FFFFFF;
		line-height: 40px;
		text-align: center;
		bottom: 15px;
		position: fixed;
		margin: auto 175rpx 30rpx;
		/* 	bottom: calc(constant(safe-area-inset-bottom)+30rpx);
		bottom: calc(env(safe-area-inset-bottom)+30rpx); */


	}
</style>